<template>
  <div>
    <el-button style="width:100%" @click="openSelectModal">设置</el-button>
    <el-dialog title="参数设置" :visible.sync="visible" append-to-body
      class="JNPF-dialog JNPF-dialog_center release-dialog" lock-scroll width="600px"
      destroy-on-close>
      <JNPF-table :data="templateJson">
        <el-table-column prop="field" label="参数名称" width="150">
          <template slot-scope="scope">
            <span class="required-sign">{{scope.row.required?'*':''}}</span>
            {{scope.row.fieldName?scope.row.field+'('+scope.row.fieldName+')':scope.row.field}}
          </template>
        </el-table-column>
        <el-table-column prop="field" label="参数来源" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sourceType" placeholder="请选择参数来源"
              @change="onSourceTypeChange(scope.$index,scope.row.sourceType)">
              <el-option v-for="item in getSourceTypeOptions(scope.row.required)" :key="item.id"
                :label="item.fullName" :value="item.id" :disabled="item.disabled">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="表单字段">
          <template slot-scope="scope">
            <el-select v-model="scope.row.relationField" placeholder="请选择表单字段" clearable filterable
              @change="onFieldChange($event,scope.row)" v-if="scope.row.sourceType == 1">
              <el-option v-for="item in fieldOptions" :key="item.realVModel" :label="item.realLabel"
                :value="item.realVModel" />
            </el-select>
            <el-select v-model="scope.row.relationField" placeholder="请选择系统变量字段" clearable
              v-else-if="scope.row.sourceType == 4">
              <el-option v-for="item in jnpf.getSystemVariables()" :key="item.id"
                :label="item.fullName" :value="item.id" />
            </el-select>
            <template v-else-if="scope.row.sourceType == 2">
              <JnpfInputNumber v-if="['int', 'decimal'].includes(scope.row.dataType)"
                v-model="scope.row.relationField" placeholder="请输入参数值" clearable controls
                controlsPosition='right' class="input-number" />
              <JnpfDatePicker v-else-if="scope.row.dataType == 'datetime'" style="width:100%"
                v-model="scope.row.relationField" placeholder="请选择参数值" format="yyyy-MM-dd HH:mm:ss"
                clearable />
              <el-input v-model="scope.row.relationField" placeholder="请输入参数值" clearable v-else />
            </template>
          </template>
        </el-table-column>
      </JNPF-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
        <el-button type="primary" @click="handleSubmit">
          {{$t('common.confirmButton')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'SelectInterfaceBtn',
  props: {
    // 参数json
    templateJson: { type: Array, default: () => [] },
    // 字段options
    fieldOptions: { type: Array, default: () => [] },
    // 参数来源类型 1：全部参数来源  2：参数来源不显示字段  3:参数来源不显示系统变量
    type: { type: Number, default: 1 },
    // 系统字段显示表单id
    showSystemFormId: { type: Boolean, default: true },
    // 系统字段显示完整名称
    showSystemFullLabel: { type: Boolean, default: false },
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    openSelectModal() {
      this.visible = true;
    },
    onFieldChange(e, row) {
      this.$emit('fieldChange', e, row);
    },
    handleSubmit() {
      this.visible = false;
    },
    onSourceTypeChange(index, value) {
      this.templateJson[index].relationField = value == 4 ? '@userId' : ''
    },
    getSourceTypeOptions(required) {
      const sourceTypeOptions = [
        { id: 1, fullName: '字段' },
        { id: 2, fullName: '自定义' },
        { id: 4, fullName: '系统变量' },
        { id: 3, fullName: '为空' },
      ];
      let list = this.type == 2 ? sourceTypeOptions.filter(o => o.id != 1) : this.type == 3 ? sourceTypeOptions.filter(o => o.id != 4) : sourceTypeOptions;
      return required ? list.filter(o => o.id != 3) : list
    }
  }
}
</script>
<style lang="scss" scoped>
.release-dialog {
  >>> .el-dialog {
    .el-dialog__body {
      padding: 0;
      height: 300px;
      background: #ebeef5;
    }
  }
}
</style>
  
